<template>
    <div>
        <div class="bg-curved"></div>
        <v-container class="pb-0 white--text" style="position: relative">
            <v-row no-gutters dense>
                <v-col class="d-flex align-center">
                    <v-avatar
                        size="24"
                        style="border: 2px solid white"
                        color="white"
                    >
                        <v-img src="/asset/h5/img/avatar.png"></v-img>
                    </v-avatar>
                    <h2 class="ml-1">{{app_name}}</h2>
                </v-col>
                <v-col>
                    <v-text-field
                        class="rounded-pill half-transparent"
                        dense
                        solo
                        flat
                        hide-details
                        placeholder="点击下面轮播广告，可以立刻申请贷款"
                        clearable
                        prepend-inner-icon="mdi-magnify"
                    >
                    </v-text-field>
                </v-col>
            </v-row>
        </v-container>
        <v-container>
            <v-carousel
                :continuous="true"
                :show-arrows="false"
                cycle
                hide-delimiters
                height="150"
                class="rounded-lg elevation-2"
            >
                <v-carousel-item
                    v-for="(item, i) in banner"
                    :key="i"
                    :src="item.image"
                    :target="item.target"
                    :href="item.link ? item.link : ''"
                    :transition="false"
                ></v-carousel-item>
            </v-carousel>

            <v-row class="py-6 px-2 grid-btn mt-0">
                <v-col cols="3" class="d-inline-flex justify-center mb-4">
                    <v-btn
                        link
                        block
                        plain
                        :ripple="false"
                        :to="`/loan?cate=general`"
                    >
                        <div class="text-center">
                            <div>精准实时</div>
                            <div>综合订单</div>
                        </div>
                        <div style="height: 24px; width: 24px">
                            <IconHome1></IconHome1>
                        </div>
                    </v-btn>
                </v-col>
                <v-col cols="3" class="d-inline-flex justify-center mb-4">
                    <v-btn
                        link
                        block
                        plain
                        :ripple="false"
                        :to="`/loan?cate=mortgage-house`"
                    >
                        <div class="text-center">
                            <div>精准实时</div>
                            <div>房抵贷</div>
                        </div>

                        <div style="height: 24px; width: 24px">
                            <IconHome2></IconHome2>
                        </div>
                    </v-btn>
                </v-col>
                <v-col cols="3" class="d-inline-flex justify-center mb-4">
                    <v-btn
                        link
                        block
                        plain
                        :ripple="false"
                        :to="`/loan?cate=mortgage-tax`"
                    >
                        <div class="text-center">
                            <div>精准实时</div>
                            <div>企业票贷</div>
                        </div>
                        <div style="height: 24px; width: 24px">
                            <IconHome3></IconHome3>
                        </div>
                    </v-btn>
                </v-col>
                <v-col cols="3" class="d-inline-flex justify-center mb-4">
                    <v-btn
                        link
                        block
                        plain
                        :ripple="false"
                        :to="`/loan?cate=mortgage-car`"
                    >
                        <div class="text-center">
                            <div>精准实时</div>
                            <div>车抵贷</div>
                        </div>
                        <div style="height: 24px; width: 24px">
                            <IconHome4></IconHome4>
                        </div>
                    </v-btn>
                </v-col>
                <v-col cols="3" class="d-inline-flex justify-center">
                    <v-btn
                        link
                        block
                        plain
                        :ripple="false"
                        :to="`/loan?cate=credit-provident`"
                    >
                        <div class="text-center">
                            <div>精准实时</div>
                            <div>公积金贷</div>
                        </div>
                        <div style="height: 24px; width: 24px">
                            <IconHome5></IconHome5>
                        </div>
                    </v-btn>
                </v-col>
                <v-col cols="3" class="d-inline-flex justify-center">
                    <v-btn link block plain :ripple="false" @click="dialog = true">
                        <div class="text-center">
                            <div>定向个人</div>
                            <div>流量包</div>
                        </div>
                        <div style="height: 24px; width: 24px">
                            <IconHome6></IconHome6>
                        </div>
                    </v-btn>
                </v-col>
                <v-col cols="3" class="d-inline-flex justify-center">
                    <v-btn link block plain :ripple="false" @click="dialog = true">
                        <div class="text-center">
                            <div>定向团队</div>
                            <div>流量包</div>
                        </div>
                        <div style="height: 24px; width: 24px">
                            <IconHome7></IconHome7>
                        </div>
                    </v-btn>
                </v-col>
                <v-col cols="3" class="d-inline-flex justify-center">
                    <v-btn link block plain :ripple="false" @click="dialog = true">
                        <div class="text-center">
                            <div>定向公司</div>
                            <div>流量包</div>
                        </div>
                        <div style="height: 24px; width: 24px">
                            <IconHome8></IconHome8>
                        </div>
                    </v-btn>
                </v-col>
            </v-row>
            <div
                v-for="(div, index) in home_h5_diy"
            >
                <div v-if="div.type == 'type1'">
                    <h3 class="my-2 pl-2 border-left-red">{{div.form.table_title}}</h3>
                    <v-card outlined class="rounded-lg">
                        <v-card-text>
                            <h3 class="mb-4 primary--text">
                                {{div.form.title}}
                            </h3>
                            <v-btn
                                v-if="uid"
                                depressed
                                dark
                                small
                                class="rounded-pill"
                                color="primary"
                                :to="div.form.button_herf"
                            >
                                {{div.form.button_name}}
                            </v-btn>
                            <v-btn
                                v-else
                                depressed
                                dark
                                small
                                class="rounded-pill"
                                color="primary"
                                :to="`/login`"
                            >
                                {{div.form.button_name}}
                            </v-btn>
                        </v-card-text>
                    </v-card>
                </div>
                <div v-if="div.type == 'type2'">
                    <h3 class="mt-4 mb-2 pl-2 border-left-red">{{div.form.table_title}}</h3>
                    <v-card outlined class="rounded-lg">
                        <v-card-text>
                            <v-row>
                                <v-col>
                                    <h3 class="mb-4 primary--text">
                                        {{div.form.title}}
                                    </h3>
                                    <div>
                                        <v-chip outlined small color="primary" v-for="(d, i) in div.form.tag" :key="i">{{d}}</v-chip>
                                    </div>
                                </v-col>
                                <v-col cols="4">
                                    <v-img aspect-ratio="1" :src="div.form.code_url"> </v-img>
                                </v-col>
                            </v-row>
                        </v-card-text>
                    </v-card>
                </div>
            </div>
        </v-container>


        <v-dialog v-model="dialog" persistent max-width="290">
            <v-card>
                <v-card-title>添加客服微信</v-card-title>
                <v-card-text>
                    联系官方客服升级一对一流量定制推广服务
                    <img :src="qr_code" alt="客服二维码" style="max-width: 100%;">
                </v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="green darken-1" text @click="dialog = false">
                        关闭
                    </v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>

    </div>
</template>

<script>
import axios from "axios";
import { mapGetters } from "vuex";
import IconHome1 from "../../icon/home1.vue";
import IconHome2 from "../../icon/home2.vue";
import IconHome3 from "../../icon/home3.vue";
import IconHome4 from "../../icon/home4.vue";
import IconHome5 from "../../icon/home5.vue";
import IconHome6 from "../../icon/home6.vue";
import IconHome7 from "../../icon/home7.vue";
import IconHome8 from "../../icon/home8.vue";

export default {
    data: () => ({
        dialog: false,
        banner: [],
        home_h5_diy:[],
        qr_code: "",
        app_name: '',
    }),
    components: {
        IconHome1,
        IconHome2,
        IconHome3,
        IconHome4,
        IconHome5,
        IconHome6,
        IconHome7,
        IconHome8,
    },
    computed: {
        ...mapGetters(["uid"]),
    },
    created() {
        this.load();
        this.saveCode();
    },
    methods: {
        saveCode(){
            if (this.$route.query.code) {
                console.log('邀请码：',this.$route.query.code)
                // 将邀请码存储到localStorage
                localStorage.setItem('inviteCode', this.$route.query.code);
            }
        },
        load() {
            axios
                .get(`/v1/home`)
                .then((response) => {
                    this.banner = response.data.data.banner;
                    this.home_h5_diy = response.data.data.home_h5_diy;
                    console.log('this.home_h5_diy',this.home_h5_diy)
                    this.app_name = response.data.data.app_name;
                })
                .catch(function () {})
                .then(function () {});


        },

        goPlan() {
            if (this.uid && this.uid > 0) {
                this.$router.push({ path: `/loan` });
            } else {
                this.$toasted.show("请联系客服进行开通", {
                    type: "error",
                    position: "bottom-center",
                });
            }
        },
    },
};
</script>

<style lang="scss">
.border-left-red {
    border-left: 3px solid #ba2b39;
}

.grid-btn .v-btn .v-btn__content {
    flex-direction: column-reverse;
    height: inherit;
}

div.bg-curved {
    position: absolute;
    overflow: hidden;
    height: 180px;
    width: 100%;
}

div.bg-curved::before {
    background-color: #ba2b39;
    border-radius: 100%;
    position: absolute;
    right: -200px;
    left: -200px;
    top: -200px;
    content: "";
    bottom: 0;
}

.theme--light.half-transparent.v-text-field--solo
    > .v-input__control
    > .v-input__slot {
    background-color: rgb(255 255 255 / 71%);
}
</style>
